<template>
	<div>
		<!-- 添加角色 -->
		<el-button @click="addRole" type="primary">添加角色</el-button>
		<!-- 列表 -->
		<el-table :data="list" style="width: 100%">
			<!-- 扩展的二级表格 -->
			<el-table-column type="expand">
				<template v-slot="data">
					<TableInner :row="data.row"></TableInner>
				</template>
			</el-table-column>
			<el-table-column type="index"> </el-table-column>
			<el-table-column prop="roleName" label="角色名称"> </el-table-column>
			<el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
			<el-table-column label="操作">
				<template v-slot="scope">
					<el-button @click="setRole(scope.row, 2)" type="primary"
						>编辑</el-button
					>
					<el-button @click="setRole(scope.row)" type="primary">删除</el-button>
					<el-button @click="setRole(scope.row, 3)" type="primary"
						>分配</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 弹窗 -->
		<Dialog :title="title" @enter="enter" :visible.sync="visible">
			<div v-if="etype === 1 || etype === 2">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item
						label="角色名称"
						prop="roleName"
						:rules="[
							{ min: 3, max: 10, message: '角色长度3-10', trigger: 'blur' },
						]"
						required
					>
						<el-input v-model="form.roleName"></el-input>
					</el-form-item>
					<el-form-item
						label="角色描述"
						prop="roleDesc"
						:rules="[
							{ min: 4, max: 20, message: '描述长度4-20', trigger: 'blur' },
						]"
						required
					>
						<el-input v-model="form.roleDesc"></el-input>
					</el-form-item>
				</el-form>
			</div>

			<div v-else-if="etype === 3">
				<el-tree
					:data="tree"
					show-checkbox
					default-expand-all
					node-key="id"
					:default-checked-keys="ids"
					ref="tree"
					highlight-current
					:props="defaultProps"
				>
				</el-tree>
			</div>
		</Dialog>
	</div>
</template>

<script>
import { getRolesApi, addRole, editRole } from '@/api/roles'
import { getRights } from '@/api/rights'
var formModel = {
	roleName: '',
	roleDesc: '',
}
import mixins from './mixins'
export default {
	mixins: [mixins],
	name: 'Roles',
	data() {
		return {
			// 用户的数据
			form: JSON.parse(JSON.stringify(formModel)),
		}
	},
	methods: {
		// 添加角色
		addRole() {
			this.visible = true
			this.title = '添加角色'
			this.etype = 1
			this.form = JSON.parse(JSON.stringify(formModel))
		},
		// 接收确定的创建函数
		enter() {
			// 1. 判断一下是什么类型的窗口
			switch (this.etype) {
				case 1:
					// 添加用户需要前端校验
					this.$refs.form.validate((state) => {
						if (state) {
							// TODO：这里是添加角色的接口请求
							addRole(this.form).then(({ data }) => {
								console.log(data)
							})
						} else {
							this.$message.error('所填内容不合法！')
						}
					})
					break
				case 2:
					// 编辑用户
					var { id, ...data } = this.form
					editRole(id, data).then(({ data }) => {
						console.log(data.data)
					})
					break
				default:
					console.log('分配角色')
					console.log(this.$refs.tree.getCheckedKeys().join(','))
			}
		},
		// 获取列表数据
		getRoles() {
			getRolesApi().then(({ data }) => {
				this.list = data.data
			})
		},
		// 操作按钮组事件
		setRole(data, type) {
			this.title = '编辑角色'
			this.visible = true
			this.etype = type
			var { children, ...reset } = data
			this.form = reset
			// 如果type === 3 请求所有角色的数据
			if (type === 3) {
				this.ids = []
				getRights('tree').then(({ data }) => {
					this.tree = data.data
					this.findIDs(children)
				})
			}
		},
	},
	mounted() {
		this.getRoles()
	},
	components: {
		TableInner: () => import('./component/TableInner.vue'),

		Dialog: () => import('./component/DIalog.vue'),
	},
}
</script>

<style>
</style>